<div
  fxLayout="row wrap"
  fxLayout.lt-sm="column"
  fxLayoutAlign="flex-start"
  fxLayoutGap.gt-sm="10px"
>
  <div
    fxFlex.lt-md="100%"
    fxFlex.md="0 1 calc(60% - 10px)"
    fxFlex.lg="0 1 calc(65% - 10px)"
    fxFlex.xl="0 1 calc(70% - 10px)"
  >
    <h2>Fleets</h2>

    <nz-button-group>
      <button nz-button nzType="primary" (click)="confirm()">
        <span>Confirm</span>
      </button>
      <button nz-button (click)="reinforceAll()">
        <span>Reinforce</span>
      </button>
      <button nz-button (click)="copyOne()">
        <span>Copy all from Fleet 1</span>
      </button>
      <button nz-button nz-dropdown [nzDropdownMenu]="menu">
        <span>Fleets priorities</span><i nz-icon nzType="down"></i>
      </button>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="setFleets(0)">
            <a>Fleet 1</a>
          </li>
          <li nz-menu-item (click)="setFleets(1)">
            <a>2 Fleets</a>
          </li>
          <li nz-menu-item (click)="setFleets(2)">
            <a>3 Fleets</a>
          </li>
          <li nz-menu-item (click)="setFleets(3)">
            <a>4 Fleets</a>
          </li>
          <li nz-menu-item (click)="setFleets(4)">
            <a>5 Fleets</a>
          </li>
        </ul>
      </nz-dropdown-menu>
    </nz-button-group>

    <nz-collapse>
      <nz-collapse-panel
        *ngFor="let panel of panels; let i = index; trackBy: getPanelId"
        [nzHeader]="fleetTitle"
        [nzActive]="panel.active"
        [nzDisabled]="panel.disabled"
        (nzActiveChange)="activeChange($event, panel)"
      >
        <ng-template #fleetTitle>
          <strong class="fleet-name"> {{ panel.name }} </strong>

          <span class="text-secondary">Priority: </span>
          <nz-input-number
            nzSize="small"
            class="fleet-priority"
            nzMin="0"
            nzMax="5000"
            [(ngModel)]="ms.game.shipyardManager.fleetNavCapPriorityUi[i]"
          >
          </nz-input-number>
          <span class="text-secondary">Capacity: </span>
          <span class="monospace fleet-capacity">{{
            ms.game.shipyardManager.fleetsCapacity[i] | format
          }}</span>
          <span class="new-cap text-secondary">New Capacity: </span>
          <span
            class="monospace"
            [class.text-success]="
              ms.game.shipyardManager.fleetsCapacityUi[i] >
              ms.game.shipyardManager.fleetsCapacity[i]
            "
            [class.text-danger]="
              ms.game.shipyardManager.fleetsCapacityUi[i] <
              ms.game.shipyardManager.fleetsCapacity[i]
            "
            >{{ ms.game.shipyardManager.fleetsCapacityUi[i] | format }}</span
          >
        </ng-template>
        <nz-table
          #basicTable
          nzTemplateMode
          nzSize="middle"
          nzTableLayout="fixed"
          *ngIf="panel.activated"
        >
          <thead>
            <tr>
              <th>Design</th>
              <th nz-tooltip nzTooltipTitle="Priority">Priority</th>
              <th
                nz-tooltip
                nzTooltipTitle="Quantity of ships you have, including outdated ships"
              >
                Actual
              </th>
              <th nz-tooltip nzTooltipTitle="Quantity of outdated ships">
                Old
              </th>
              <th nz-tooltip nzTooltipTitle="Desired quantity">Qty</th>
              <th nz-tooltip nzTooltipTitle="New Desired quantity">New</th>
              <th nzWidth="2rem"></th>
            </tr>
          </thead>
          <tbody>
            <tr
              *ngFor="
                let design of ms.game.shipyardManager.shipDesigns;
                trackBy: getDesignId
              "
            >
              <td class="design-name" [routerLink]="'/des/edit/' + design.id">
                <span
                  [class.text-info]="!design.available"
                  nz-typography
                  [nzType]="design.next?.available ? 'warning' : ''"
                  nz-tooltip
                  [nzTooltipTitle]="getTooltip(design)"
                >
                  {{ design.name }}
                </span>
              </td>
              <td>
                <nz-input-number
                  nzSize="small"
                  [(ngModel)]="design.fleets[panel.fleet].navalCapPercentUi"
                  [nzMin]="0"
                  [nzMax]="100"
                  [nzStep]="1"
                ></nz-input-number>
              </td>
              <td>
                <span class="monospace">
                  {{
                    design.fleets[panel.fleet].shipsQuantity +
                      (design.old?.fleets)[panel.fleet].shipsQuantity
                      | number: "1.0-0"
                  }}
                </span>
              </td>
              <td>
                <span class="monospace">
                  {{
                    (design.old?.fleets)[panel.fleet].shipsQuantity
                      | number: "1.0-0"
                  }}
                </span>
              </td>
              <td>
                <span class="monospace">
                  {{ design.fleets[panel.fleet].wantedShips | number: "1.0-0" }}
                </span>
              </td>
              <td>
                <span
                  class="monospace"
                  [class.text-success]="
                    design.fleets[panel.fleet].wantedShips <
                    design.fleets[panel.fleet].wantedShipsUi
                  "
                  [class.text-danger]="
                    design.fleets[panel.fleet].wantedShips >
                    design.fleets[panel.fleet].wantedShipsUi
                  "
                >
                  {{
                    design.fleets[panel.fleet].wantedShipsUi | number: "1.0-0"
                  }}
                </span>
              </td>
              <td>
                <button
                  nz-button
                  nzType="link"
                  nzTrigger="click"
                  nz-dropdown
                  [nzDropdownMenu]="menu1"
                  nzPlacement="bottomRight"
                >
                  <i nz-icon nzType="ellipsis"></i>
                </button>
                <nz-dropdown-menu #menu1="nzDropdownMenu">
                  <ul nz-menu>
                    <li nz-menu-item (click)="view(design, designView)">
                      <i nz-icon nzType="eye"></i>
                      View
                    </li>
                    <li nz-menu-item [routerLink]="'/des/edit/' + design.id">
                      <i nz-icon nzType="arrow-right" nzTheme="outline"></i>
                      Go to design
                    </li>
                    <li
                      nz-menu-item
                      (click)="design.deleteOutDated()"
                      [nzDisabled]="!design.old"
                    >
                      <i nz-icon nzType="delete" nzTheme="outline"></i>
                      Delete outdated ships
                    </li>
                    <li
                      nz-menu-item
                      class="text-danger"
                      nz-popconfirm
                      [nzPopconfirmTitle]="
                        'Are you sure delete ' + design.name + '?'
                      "
                      nzPopconfirmPlacement="bottom"
                      (nzOnConfirm)="ms.game.shipyardManager.delete(design)"
                    >
                      <i nz-icon nzType="delete" nzTheme="outline"></i>
                      Delete design
                    </li>
                  </ul>
                </nz-dropdown-menu>
              </td>
            </tr>
          </tbody>
        </nz-table>
        <button
          class="fleet-confirm-btn"
          nz-button
          nzType="primary"
          (click)="confirmFleet(i)"
        >
          <span>Confirm Fleet {{ i + 1 }}</span>
        </button>
      </nz-collapse-panel>
    </nz-collapse>

    <nz-alert
      *ngIf="warning"
      nzType="warning"
      nzMessage="Some ships will destroyed!"
      nzShowIcon
    ></nz-alert>
  </div>
  <div
    fxFlex.lt-md="100%"
    fxFlex.md="0 1 calc(40% - 10px)"
    fxFlex.lg="0 1 calc(35% - 10px)"
    fxFlex.xl="0 1 calc(30% - 10px)"
  >
    <!-- <h2>Jobs</h2> -->
    <div class="sort-form">
      <button nz-button (click)="ms.game.shipyardManager.sortJobs()">
        <i nz-icon nzType="sort-ascending" nzTheme="outline"></i>
        <span>Sort</span>
      </button>
      <label nz-checkbox [(ngModel)]="ms.game.shipyardManager.sort"
        >Auto Sort</label
      >
    </div>

    <div
      cdkDropList
      [cdkDropListData]="ms.game.shipyardManager.toDo"
      class="job-list"
      (cdkDropListDropped)="drop($event)"
    >
      <app-job
        cdkDrag
        class="job-box"
        *ngFor="let resToDo of ms.game.shipyardManager.toDo"
        [job]="resToDo"
        [collection]="ms.game.shipyardManager.toDo"
      ></app-job>
    </div>
  </div>
</div>

<ng-template #designView let-params let-ref="modalRef">
  <app-design-detail [data]="params.value"></app-design-detail>
</ng-template>
